<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>基本使用</title>
  <!-- 引入 Vue -->
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
  <!-- 
    Vue 中使用组件的三大步骤：定义组件(创建组件)；注册组件；使用组件(编写组件标签)。
    如何定义一个组件：
      使用 Vue.extend(options) 创建，其中 options 和 new Vue(options) 时传入的几乎一样，区别如下：
        el 不要写 —— 最终所哟逇组件都要经过一个 vm 管理，有 vm 中的 el 决定服务哪个容器；
        data 必须写成函数式 —— 避免组件被复用时，数据存在引用关系。
      备注：使用 template 可以配置组件结构。
    如何注册组件：
      局部注册：依靠 new Vue 时传入 components 选项；
      全局注册：依靠 Vue.component('组件名', 组件)。
    编写组件标签：例 <school></school>

    几个注意点：
      关于组件名:
        一个单词组成：第一种写法(首字母小写):school; 第二种写法(首字母大写):School.
        多个单词组成：第一种写法(kebab-case):my-school; 第二种写法(CamelCase):MySchool(需要Vue脚手架支持)
        备注：组件名尽可能避免 HTML 中已有元素标签; 可以使用 name 配置项指定组件在开发者工具中的名称。
      关于组件标签：
        第一种写法：<school></school>
        第二种写法：<school/>
        备注：不用脚手架时，<school/>会导致后续组件不能渲染。
      一个简写方式：const school = Vue.extend(options) => const school = options
  -->
  <div id="root"> 
    <!-- 第三步：编写组件标签 -->
    <hello></hello>
    <school></school>
    <hr>
    <student></student>
  </div>
  <hr>
  <div id="root2">
    <hello></hello>
  </div>
</body>
<script type="text/javascript" >
    Vue.config.productionTip = false; // 组织 Vue 在启动时生成生产提示
    // 第一步：创建 school 组件
    const school = Vue.extend({
      template:`
        <div>
          <h2>学校名称: {{name}}</h2>
          <h2>学校地址: {{address}}</h2>
        </div> `,
      data(){
        return {
          name: '南昌大学',
          address: '江西南昌'
        }
      }
    })
    // 第一步：创建 student 组件
    const student = Vue.extend({
      template:`
        <div>
          <h2>学生姓名: {{name}}</h2>
          <h2>学生年龄: {{age}}</h2>
        </div> `,
      data(){
        return {
          name: '凌宸',
          age: 21
        }
      }
    })
    // 第一步：创建 hello 组件
    const hello = Vue.extend({
      template:`
        <div>
          <h2>你好啊！{{name}}</h2> 
        </div> `,
      data(){
        return {name:'凌宸'}
      }
    })
    // 第二步：注册组件(全局注册)
    Vue.component('hello', hello)
    new Vue({
      el: '#root',
      data:{
        msg: '你好啊！'
      },
      // 第二步：注册组件(局部注册)
      components:{
        school,
        student
      }
    })

    new Vue({
      el: '#root2',
    })
</script>
</html>